<template>
	<div class="goods common">
    <div class="commonIn">
      <div class="commonInWrapper">
        <div class="mainEditor">
          <div class="meLeft navIn">
            <nav-component :baseInfo="baseInfo" ></nav-component>
          </div>
          <div class="meRight goodsInfo">
            <router-view @updateBaseInfo="updateBaseInfo" ></router-view>
          </div>
        </div>
      </div>
    </div>
    <div class="previewIn" v-show="mobileView">
      <preview-component :mobileView="mobileView"></preview-component>
    </div>
	</div>
</template>

<script type="javascript/ecmascript6">
import NavComponent from '@/components/navcomponent/navcomponent.vue'
import PreviewComponent from '@/components/previewcomponent/previewcomponent.vue'
import fetch from '@/fetch'
import {mapActions} from 'vuex'

export default{
  data () {
    return {
      mobileView: 'goods',
      baseInfo: {
        image: {
          preImgUrl: ''
        },
        infoId: 0,
        introduction: '',
        name: '',
        servicePhone: ''
      }
    }
  },
  methods: {
    ...mapActions([
      'basicStatus'
    ]),
    updateBaseInfo () {
      this.getBaseInfo()
    },
    getBaseInfo () {
      fetch.send('/merchant/getBaseInfo').then(res => {
          if (res.respCode === '000000') {
            this.baseInfo = res.result
            if (!this.baseInfo.image) {
              this.baseInfo.image = {
                imgId: 0,
                imgUrl: '',
                preImgUrl: ''
              }
            }
            this.basicStatus(this.baseInfo)
          } else {
            this.$noty.error(res.respDesc ? res.respDesc : '获取基本信息失败')
        }
      })
    }
  },
  created () {
    this.getBaseInfo()
  },
  watch: {
    $route (newRoute, oldRoute) {
      let uri = newRoute.path
      if (uri === '/basic' || uri === '/goods/home') {
        this.mobileView = 'goods'
      } else if (uri === '/stores/home') {
        this.mobileView = 'stores'
      } else {
        this.mobileView = null
      }
    }
  },
  components: {
    NavComponent,
    PreviewComponent
  }
}
</script>

<style type="text/css" scoped>
.common{
  display: flex;
  flex: 0 0 auto;
}
.commonIn{
  flex: 1 1 0%;
  transition: opacity .2s;
}
.commonIn .commonInWrapper{
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.mainEditor{
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.meLeft,.meRight{
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background: #ffffff;
}
.meRight{
  flex: 1 1 0%;
}
.previewIn{
  box-sizing: border-box;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  text-align: center;
  width: 32.6%;
}
.common .previewIn{
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  background: #F2F2F2;
  min-width: 420px;
  transition: width .4s;
}
</style>